<template>
	<view class="recharge_page">
		<view class="paid-info">
			<view class="header">
				<view class="charge-station">
					<view class="titile">支付会员：</view>
					<view class="station-name">
						{{this.defaultMemberInfo.memberName}}
						<!-- 					<picker class="picker" @change="changePickerUnit($event,unitList)" :value="indexUnit"
							:range="unitList" :range-key="'hospital'">
							<view class="picker">
								{{unitName}}
							</view>
						</picker>
						<image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/right.png" mode=""></image> -->
					</view>

				</view>
			</view>
			<view class="price-title">支付金额</view>
			<view class="select">
				<view class="price-input">
					<view>自定义金额</view>
					<view class="ipt"><input type="number" v-model="param.amt" placeholder="输入金额" /></view>
				</view>
				<!-- <view class="amt_item">余额766元。</view> -->
				<view class="amt_item">
					<text class="gift_amt" v-if="param.giftAmt > 0">
						赠送金额
						<text>66元</text>
					</text>
					<text class="real_amt" v-if="param.giftAmt > 0">
						实际到账金额
						<text>88元</text>
					</text>
					<text class="calcGiftAmtStatus" v-if="giftAmtStatus">正在计算赠送金额...</text>
					<view class="calcGiftAmtStatus" style="margin-top: 10rpx;" v-if="activityName">参与活动：无活动</view>
				</view>
			</view>
			<view class="payment-method">
				<view class="title">
					<view>

					</view>
					支付方式
				</view>
				<view class="br">

				</view>
				<view class="balance">
					<view class="balance-title">
						<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/balance-new.png" mode=""></image>
						<text>余额</text>
					</view>
					<view class="balance-list">
						<radio-group @change="radioPayWay">
							<label class="uni-list-cell item" v-for="(item, index) in memberPayInfo"
								:key="item.memberId">
								<view class="item-name">{{item.memberName}}:<text
										v-if="item.accAmt>=0">{{item.accAmt}}元</text></view>
								<radio :disabled="!item.memberType || item.accAmt<param.amt" :value="item.memberId"
									:checked="index === currentPayMethodsIndex" />
							</label>
						</radio-group>
						<view class="br">

						</view>
					</view>
					<view class="wechat-pay">
						<radio-group @change="radioUnmemberPayWay" style="width: 100%;">
							<label class="uni-list-cell wechat-pay-title" v-for="(item, index) in unmemberPayInfo"
								:key="item.id">
								<view style="display: flex;align-items: center;">
									<image src="http://wx.xiongmaovip.com/miniapp/static/chargeFuel/we-chat-new.png" mode=""></image>
									<text>{{item.payName}}</text>
								</view>
								<radio :value="item.id" :checked="index === currentUnmemberPayIndex" />
								<!-- currentUnmemberPayIndex -->
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="title">
					<view>

					</view>
					优惠券
				</view>
				<view class="br">

				</view>
				<view class="meet-price" @click="coupon()">
					<view class="meet">
						优惠券
					</view>
					<view class="price" style="display: flex;align-items: center;">
						<text v-if="currentCouponChangeIndex==null && !iscoupon">{{couponList.length || '0' }} 张 </text>
						<text v-else>{{!iscoupon?couponList[currentCouponChangeIndex].couponName:'不使用优惠券'}}</text>
						<image style="width: 28rpx;height: 28rpx;" src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-right.png" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="price">
				<text>实付：</text>
				<text>￥<text style="font-size: 44rpx; color: #E56646;">{{param.amt || '0.00'}}</text>
				</text>
			</view>
			<view class="button" :class="{'active_next_pay': param.amt>0}" @click="confirm_pr()">
				去支付
			</view>
		</view>
		<!-- 优惠券popup -->
		<uni-popup ref="couponPopup" background-color="#fff" :is-mask-click="false">
			<view class="coupon-content">
				<view class="title">
					优惠券
					<view class="close" @click="$refs.couponPopup.close()">
						<image src="http://wx.xiongmaovip.com/miniapp/static/fuel/fuel-close.png" mode=""></image>
					</view>
				</view>
				<view class="coupon-list">
					<view class="no-coupon">
						<radio-group @change="noCouponChange">
							<label class="radio">
								<radio value="" :checked="currentnoCouponChangeIndex==0" /><text>不使用优惠券</text>
							</label>
						</radio-group>
					</view>
					<radio-group @change="couponChange">
						<view class="list" v-for="(item,index) in couponList" :key="index">
							<view class="coupon-left">
								<view class="price">
									￥<text>{{item.couponVal}}</text>
								</view>
								<view class="interval">
									{{item.amtMin}}-{{item.amtMax}}元可用
								</view>
							</view>
							<view class="br">

							</view>
							<label class="uni-list-cell">
								<view class="coupon-info">
									<view class="name">
										{{item.couponName}}
									</view>
									<view class="date">
										{{item.startTime}} 至 {{item.endTime}}
									</view>
									<view class="memo">
										已满足可用条件
									</view>
								</view>
								<view>
									<radio :value="item.couponId" :checked="currentCouponChangeIndex==index" />
								</view>
							</label>
						</view>
					</radio-group>
					<!-- 					<view class="confirm_coupon" @click="confirm_coupon">
						<span>确认</span>
					</view> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		createRechargeOrder,
		miniPay,
		listCoupon,
		createdOrder,
		getCode,
		createMemberInfo
	} from '@/api/index.js'
	import weChatPay from '@/utils/charge-pre-pay.js'
	import {
		nextSnowflakeId
	} from '@/utils/snowflake.js'
	export default {
		data() {
			return {
				param: {
					memberId: '',
					amt: null,
					giftAmt: 0,
				},
				stationId: '',
				memberName: '',
				activityName: '',
				giftAmtStatus: false,
				couponList: [],
				tot: 0,
				auiLoading: {
					msg: '优惠获取中'
				},
				defaultMemberInfo: {}, // 默认的会员信息
				memberPayInfo: [], // 会员支付方式的支付及会员信息列表
				currentPayMethodsIndex: null, // 会员支付方式下标
				unmemberPayInfo: [{
						payName: '微信',
						id: '2'
					}
					// {
					// 	payName: '支付宝',
					// 	id: '3'
					// }
				],
				currentUnmemberPayIndex: null, // 非会员支付方式下标
				payType: null, // 1-会员支付 0-非会员支付
				orderDiscountInfo: {}, // 获取优惠信息
				currentnoCouponChangeIndex: null,
				currentCouponChangeIndex: null,
				currentOrder: {}, // 所选订单信息
				couponId: '',
				iscoupon: false
			};
		},
		onLoad(option) {
			let that = this
			that.stationId = decodeURIComponent(option.q).split('=')[1]
			if (!uni.getStorageSync('memberInfo')) {
				getCode().then(res => {
					createMemberInfo({
						openId: res.openid
					}).then(res => {
						if (res.memberId) {
							uni.setStorageSync('memberInfo',JSON.stringify(res))
							that.getData()
							that.getListCoupon()
							return
						}
						toast('您还不是会员，请先注册')
						let time = setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index'
							})
							clearTimeout(time)
						}, 1000)

					})
				})
				return
			}
			that.getData()
			that.getListCoupon()
			// this.memberName = option.memberName
			// this.param.memberId = option.memberId
			// this.param.stationId = option.stationId
		},
		methods: {
			getData() {
				let data = JSON.parse(uni.getStorageSync('memberInfo'))
				this.defaultMemberInfo = data.memberVo.member
				this.memberPayInfo = data.memberAccListVos
				if (!this.memberPayInfo.some(item => item.memberType == 4)) {
					this.memberPayInfo.push({
						memberName: '能量卡'
					})
				}
				if (!this.memberPayInfo.some(item => item.memberType == 2)) {
					this.memberPayInfo.push({
						memberName: '企业子卡'
					})
				}
			},
			// 选择会员支付方式
			radioPayWay: function(evt) {
				console.log(evt, '选择会员支付方式')
				this.payType = 2
				for (let i = 0; i < this.memberPayInfo.length; i++) {
					if (this.memberPayInfo[i].memberId == evt.detail.value) {
						this.currentPayMethodsIndex = i;
						this.currentUnmemberPayIndex = null
						break;
					}
				}
			},
			// 选择非会员支付方式
			radioUnmemberPayWay: function(evt) {
				console.log(evt, '选择非会员支付方式')
				this.payType = 0
				for (let i = 0; i < this.unmemberPayInfo.length; i++) {
					if (this.unmemberPayInfo[i].id == evt.detail.value) {
						this.currentUnmemberPayIndex = i;
						this.currentPayMethodsIndex = null
						break;
					}
				}
			},
			noCouponChange() {
				this.currentnoCouponChangeIndex = 0
				this.currentCouponChangeIndex = null
				this.couponId = ''
				this.iscoupon = true
				this.$refs.couponPopup.close()
			},
			couponChange(evt) {
				this.couponId = evt.detail.value
				for (let i = 0; i < this.couponList.length; i++) {
					if (this.couponList[i].couponId == evt.detail.value) {
						this.currentCouponChangeIndex = i;
						this.currentnoCouponChangeIndex = null
						this.iscoupon = false
						break;
					}
				}
				this.$refs.couponPopup.close()
				console.log(this.couponList[this.currentCouponChangeIndex]);
			},
			getListCoupon() {
				listCoupon({
					memberId: this.defaultMemberInfo.memberId,
					pageNum: 1,
					pageSize: 20,
					status: "1",
					bizType: '5'
				}).then(res => {
					this.couponList = res.rows
					this.tot = res.total
				})
			},
			confirm_pr() {
				if (this.param.amt > 0 && this.payType != null) {
					createdOrder({
						stationId: this.stationId,
						couponId: this.couponId,
						paidTypeId: this.payType ? this.payType : this.unmemberPayInfo[this
								.currentUnmemberPayIndex]
							.id,
						paidTypeName: this.payType ? '账户余额' : this.unmemberPayInfo[this.currentUnmemberPayIndex]
							.payName,
						openid: uni.getStorageSync('userOpenId'),
						memberId: this.payType ? this.memberPayInfo[this.currentPayMethodsIndex]
							.memberId : this.defaultMemberInfo.memberId,
						accMemberId: this.payType ? this.memberPayInfo[this.currentPayMethodsIndex]
							.accMemberId : this.defaultMemberInfo.accMemberId,
						orderAmt: this.param.amt
					}).then(res => {
						this.nextPaid(res)
					})
				}
			},
			nextPaid(value, time) {
				if (value.orderAmt) {
					uni.showLoading({
						title: '支付中...'
					})
					const self = this
					self.timer = setTimeout(() => {
						if (this, self.payType == 2) {
							miniPay({
								// orderId: self.currentOrder.orderId,
								stationId: self.stationId,
								paidTypeId: self.payType ? self.payType : self.unmemberPayInfo[self
									.currentUnmemberPayIndex].id, // 会员、微信、支付宝
								paidTypeName: self.payType ? '账户余额' : self.unmemberPayInfo[self
									.currentUnmemberPayIndex].payName,
								openid: uni.getStorageSync('userOpenId'),
								memberId: self.payType ? self.memberPayInfo[self.currentPayMethodsIndex]
									.memberId : self.defaultMemberInfo.memberId,
								accMemberId: self.payType ? self.memberPayInfo[self.currentPayMethodsIndex]
									.accMemberId : self.defaultMemberInfo.accMemberId,
								payAmt: value.orderAmt,
								reqId: nextSnowflakeId(),
								tradeType: 'SHOP_ORDER', //RECHARGE_ORDER
								sourceOrderId: value.orderId,
								attach: '', //
							}).then(res => {
								clearTimeout(self.timer)
								uni.hideLoading()
								res.fuelAmt = value.orderAmt
								uni.redirectTo({
									url: '../../panda-fuel/paid-result/index?orderinfo=' + JSON
										.stringify(res)
								})
							}).catch(error => {
								if (error.code == 95555) {
									// 支付中持续查
									self.nextPaid(5000)
								} else {
									console.log(error)
								}
							})
						} else {
							let data = {
								stationId: self.stationId,
								tradeType: 'SHOP_ORDER',
								sourceOrderId: value.orderId,
								payAmt: value.orderAmt
							}
							weChatPay(data).then(res => {
								if (res && res.code == 200) {
									let currentOrder = {
										fuelAmt: value.orderAmt,
										sourceOrderId: value.orderId
									}
									uni.redirectTo({
										url: '../paid-result/index?orderinfo=' + JSON.stringify(
											currentOrder)
									})
								}
							})
						}
					}, time)
				}
			},
			//选择优惠券
			coupon() {
				this.$refs.couponPopup.open('bottom')
			},
			// changePickerUnit(e, unitList) {
			// 	console.log(e)
			// 	let index = e.detail.value;
			// 	this.indexUnit = index
			// 	this.unitName = unitList[index].hospital // 这里给展示的text赋值
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.recharge_page {
		padding: 0px 30rpx;

		.paid-info {
			padding-bottom: 100rpx;

			.header {
				// background: #ffffff;
				margin: 16rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 32rpx;
				background: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/charge-top-bg.png") center no-repeat;
				border-top-right-radius: 40rpx;

				.charge-station {
					display: flex;
					// flex-direction: column;
					// justify-content: center;
					align-items: center;
					width: 100%;

					.titile {
						font-size: 28rpx;
						color: #2d2b2a;
						// margin-bottom: 24rpx;
					}

					.station-name {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.picker {
							width: 100%;
						}

						image {
							width: 28rpx;
							height: 28rpx;
						}
					}
				}

				.right {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.price-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #2d2b2a;
				line-height: 48rpx;
				margin: 40rpx 0rpx 20rpx 0rpx;
			}

			.select {
				// height: 408rpx;
				padding: 32rpx 32rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;

				.list {
					display: flex;
					justify-content: space-between;
					margin-bottom: 32rpx;

					.item {
						width: 190rpx;
						height: 96rpx;
						background: #f3f5f7;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						text-align: center;
						line-height: 96rpx;
					}

					.active {
						width: 190rpx;
						height: 96rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						text-align: center;
						line-height: 96rpx;
						color: #ffffff;
						background: #478bff;
					}
				}

				.price-input {
					height: 96rpx;
					background: #f3f5f7;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					display: flex;
					align-items: center;
					padding-left: 32rpx;

					view:nth-child(1) {
						width: 140rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #2d2b2a;
						line-height: 40rpx;
					}

					.ipt {
						// width: 100%;
						line-height: 90rpx;
						margin-left: 20rpx;
					}
				}

				.amt_item {
					margin-top: 24rpx;
					font-size: 28rpx;
					color: #666260;

					.gift_amt {
						text {
							color: red;
						}
					}

					.real_amt {
						text {
							color: red;
						}
					}
				}
			}

			.payment-method {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 32rpx 0rpx 28rpx 0rpx;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #2D2B2A;
					line-height: 40rpx;
					display: flex;
					align-items: center;

					view:nth-child(1) {
						width: 6rpx;
						height: 28rpx;
						background: #E56646;
						margin-right: 26rpx;
					}
				}

				.br {
					width: 100%;
					height: 2rpx;
					background: #F3F5F7;
					margin: 24rpx 0rpx 32rpx 0rpx;
				}

				.balance {
					padding-left: 32rpx;

					.pay_type {
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;

						.member_pay,
						.unmember_pay {
							margin-right: 20rpx;
							color: black;
							font-size: 24rpx;
							font-weight: 600;
							text-align: center;
							background-color: #f3f3f3;
							border-radius: 16rpx;
							width: 33.3333%;
							line-height: 60rpx;
						}

						.active_pay {
							background-color: #ffaa00;
							color: #ffffff;
						}
					}

					.balance-title {
						display: flex;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							font-size: 28rpx;
							font-weight: 500;
							color: #2D2B2A;
							line-height: 40rpx;
							margin-left: 18rpx;
						}
					}

					.balance-list {
						padding-left: 64rpx;

						.item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-right: 40rpx;
							margin-bottom: 32rpx;

							.item-name {
								font-size: 28rpx;
								color: #2D2B2A;
								line-height: 40rpx;
								width: 100%;
								display: flex;
								justify-content: space-between;

								text {
									display: inline-block;
									width: 40%;
									text-align: left;
									// display: inline-block;
									// width: 300rpx;
								}
							}
						}

						.item:nth-child(1) {
							margin-top: 28rpx;
						}

						.br {
							height: 2rpx;
							background: #F3F5F7;
						}
					}

					.wechat-pay {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: 40rpx;

						.wechat-pay-title {
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 48rpx;
								height: 48rpx;
							}

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #2D2B2A;
								line-height: 40rpx;
								margin-left: 18rpx;
							}
						}
					}
				}
			}


			.order-info {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 32rpx 32rpx;
				margin: 24rpx 0rpx;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #2D2B2A;
					line-height: 40rpx;
					display: flex;
					align-items: center;

					view:nth-child(1) {
						width: 6rpx;
						height: 28rpx;
						background: #E56646;
						margin-right: 26rpx;
					}
				}

				.br {
					width: 100%;
					height: 2rpx;
					background: #F3F5F7;
					margin: 24rpx 0rpx 32rpx 0rpx;
				}

				.meet-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.meet {
						font-size: 28rpx;
						color: #939391;
						line-height: 40rpx;
					}

					.price {
						font-size: 28rpx;
						color: #2D2B2A;
						line-height: 40rpx;
					}
				}
			}
		}


		.submit {
			width: 100%;
			left: 0;
			right: 0;
			position: fixed;
			width: 100%;
			bottom: 0;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			border-top: 1rpx #efefef solid;
			justify-content: flex-end;
			height: 96rpx;
			box-shadow: 0rpx -2rpx 10rpx 0rpx rgba(0, 0, 0, 0.0406);

			.price {
				display: flex;
				align-items: center;
				margin-right: 24rpx;

				text:nth-child(1) {
					font-size: 26rpx;
					color: #2D2B2A;
					line-height: 36rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 500;
					color: #E56646;
					line-height: 40rpx;
				}
			}

			.button {
				line-height: 72rpx;
				text-align: center;
				background-color: #d4d4d4;
				font-weight: 600;
				margin-right: 30rpx;
				width: 198rpx;
				background: linear-gradient(180deg, #F49F7C 0%, #E56646 100%);
				border-radius: 180rpx 180rpx 180rpx 180rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.active_next_pay {
				background-color: #ffaa00;
				color: #ffffff;
			}
		}

		.coupon-content {
			overflow-y: auto;
			height: 700rpx;

			.title {
				background: #FFFFFF;
				padding: 32rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #2D2B2A;
				line-height: 44rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.coupon-list {
				background: #F3F5F7;
				padding: 0rpx 30rpx 24rpx 30rpx;

				.no-coupon {
					padding: 34rpx 0rpx;

					text {
						font-size: 28rpx;
						color: #2D2B2A;
						line-height: 40rpx;
					}
				}

				.list {
					display: flex;
					align-items: center;
					// justify-content: space-between;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					background: #FFFFFF;
					padding: 32rpx 32rpx 32rpx 24rpx;
					margin-bottom: 24rpx;

					.coupon-left {
						width: 45%;

						.price {
							font-size: 32rpx;
							font-weight: 500;
							color: #E56646;
							line-height: 44rpx;

							text {
								font-size: 44rpx;
							}
						}

						.interval {
							font-size: 24rpx;
							color: #2D2B2A;
							line-height: 34rpx;
						}
					}

					.br {
						width: 4rpx;
						height: 136rpx;
						background: #F3F5F7;
						margin-left: 22rpx;
						margin-right: 32rpx;
					}

					.uni-list-cell {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.coupon-info {
							.name {
								font-size: 32rpx;
								font-weight: 500;
								color: #2D2B2A;
								line-height: 44rpx;
							}

							.date {
								font-size: 24rpx;
								color: #666260;
								line-height: 34rpx;
								margin-top: 8rpx;
								margin-bottom: 16rpx;
							}

							.memo {
								font-size: 24rpx;
								color: #939391;
								line-height: 34rpx;
							}
						}
					}

				}

				.confirm_coupon {
					width: 100%;
					margin: auto;
					line-height: 96rpx;
					font-size: 36rpx;
					color: white;
					text-align: center;
					background: #478BFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}
		}
	}
</style>